<template>
  <el-row type="flex" justify="center" class="nav">
    <el-col :span="4" class="logo">
      <a href="/">
        <img
          src="http://css99tel.cdndm5.com/v202002061704/dm5/images/header-logo.png"
          class="header-logo"
          data-v-7977534e
        />
      </a>
    </el-col>
    <el-col :span="16">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#fd113a"
        router
      >
        <el-menu-item v-for="(item,index) in list" :index="item.src" :key="index">{{item.name}}</el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="4" class="right">
      <el-menu class="el-menu-demo" mode="horizontal">
        <el-submenu index="1" v-if="user">
          <template slot="title">
            <el-avatar
              style="margin-right:10px"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
            <label>{{user.name}}</label>
          </template>
          <el-menu-item index="2-1">个人中心</el-menu-item>
          <el-menu-item index="2-2" @click="logout">退出</el-menu-item>
        </el-submenu>

        <template v-else>
          <el-menu-item index="1">
            <nuxt-link to="/login" class="font14">登录</nuxt-link>
          </el-menu-item>
          <el-menu-item index="2">
            <nuxt-link to="/register" class="font14">注册</nuxt-link>
          </el-menu-item>
        </template>
      </el-menu>
    </el-col>
  </el-row>
</template>
    
        
 
<script>
import Cookies from "js-cookie";
import Cookiex from "@/plugins/cookie";
export default {
  data() {
    return {
      list: [
        { name: "首页", src: "/" },
        { name: "推荐", src: "/recommend" },
        { name: "更新", src: "/update" },
        { name: "热门", src: "/hot" },
        { name: "排行榜", src: "/score" },
        { name: "日漫", src: "/jp" }
      ]
    };
  },
  methods: {
    logout() {
      
      Cookiex.DelCookie("current");

      this.$store.commit("user/current",null);
      window.location.href="/"

      
  
    }
  },

  computed: {
    user() {
      let obj = this.$store.state.user.current;

      return obj;
    }
  }
};
</script>

<style scoped>
.nav {
  min-width: 980px;
}
a {
  font-size: 18px;
  text-decoration: none;
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.right {
  display: flex;
  align-items: center;
}
.font14 {
  font-size: 14px;
}
</style>